<template>
	<div class="content">
	    <div class="content-top">
			潜客管理_添加信息
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
		</div>
		<div class="add-contract" ref="contract">
			<el-row>
				<el-col :span="8" >
					<label for="">订单号码：</label>
					<el-input v-model="info.orderNumber" placeholder="请输入订单号码"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">购车车主：</label>
					<el-input v-model="info.vehicleOwnerChineseName" placeholder="请输入购车车主姓名"></el-input>
				</el-col>
			    <el-col :span="8">
					<label for="">联系电话：</label>
					<el-input v-model="info.vehicleOwnerPhone" placeholder="请输入车主联系电话"></el-input>
				</el-col>
			</el-row>
			<el-row>
				
				<el-col :span="8">
					<label for="">证件类型：</label>
					<el-select v-model="info.vehicleOwnerIdType" style="width:68%" placeholder="请选择证件类型">
						<el-option
						v-for="item in dict"
						:key="item.value"
						:label="item.type"
						:value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
					<label for="">证件号码：</label>
					<el-input v-model="info.vehicleOwnerIdNumber" placeholder="请输入车主证件号码"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">车辆型号：</label>
					<el-input v-model="info.vehicleModel" placeholder="请输入车辆型号"></el-input>
				</el-col>
				
			</el-row>
			<el-row>
				<el-col :span="8">
					<label for="">潜客姓名：</label>
					<el-autocomplete
					    style="width:70%"
						popper-class="my-autocomplete"
						v-model="passengerName"
						:fetch-suggestions="querySearch"
						placeholder="请输入潜客姓名"
						@select="handleSelect">
						<i
							class="el-icon-edit el-input__icon"
							slot="suffix"
							>
						</i>
						<template slot-scope="{ item }">
							<div class="name">{{ item.value }}</div>
							<span class="addr">{{ item.id }}</span>
						</template>
					</el-autocomplete>
				</el-col>
				<el-col :span="8">
					<label for="">上牌城市：</label>
					<el-input v-model="info.vehicleLicenseCity" placeholder="请输入上牌城市"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">车辆vin码：</label>
					<el-input v-model="info.vehicleVin" placeholder="请输入车辆vin码"></el-input>
				</el-col>
				
			</el-row>
			
			
			<el-row>
				<el-col :span="8">
					<label for="">开始日期：</label>
					<el-date-picker
						type="date"
						v-model="info.vehicleDateStart"
						placeholder="请选择提车开始日期"
						value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-col :span="8">
					<label for="">结束日期：</label>
					<el-date-picker
						type="date"
						v-model="info.vehicleDateEnd"
						placeholder="请选择提车结束日期"
						value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-col :span="8">
					<label for="">签署日期：</label>
					<el-date-picker
						type="date"
						v-model="info.dateOfAgreement"
						placeholder="请选择协议签署日期"
						value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				
				
			</el-row>
			<el-row>
				<el-col :span="12">
					<label for="">选装配置：</label>
					<el-input style="width:79%" v-model="info.vehivcleOptionalConfig" type="textarea" placeholder="请输入选装配置"></el-input>
				</el-col>
				<el-col :span="12">
					<label for="">中心名称：</label>
					<el-input style="width:79%" v-model="info.deliveryCenterName" type="textarea" placeholder="请输入交付中心名称"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label for="">中心地址：</label>
					<el-input style="width:79%" v-model="info.deliveryCenterAddress" type="textarea" placeholder="请输入交付中心地址"></el-input>
				</el-col>
			</el-row>
			
		</div>
		<div class="car-title">
			<div class="car-title-left">金额</div>
		</div>
		<div class="add-contract">
			<el-row>
				<el-col :span="8">
					<label for="">预付款：</label>
					<el-input placeholder="请输入预付款" v-model="info.advancePayment"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">租用金额：</label>
					<el-input placeholder="请输入电池租用金额" v-model="info.batteryRental"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">定金：</label>
					<el-input v-model="info.downPayment" placeholder="请输入定金"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<label for="">尾款：</label>
					<el-input v-model="info.finalPayment" placeholder="请输入尾款"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">尾款余额：</label>
					<el-input v-model="info.finalPaymentBalance" placeholder="请输入尾款余额"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">贷款金额：</label>
					<el-input v-model="info.loanAmount" placeholder="请输入金融贷款金额"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<label for="">购车总价：</label>
					<el-input v-model="info.vehicleActualTotalPrice" placeholder="请输入实际购车总价"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">车辆总价：</label>
					<el-input v-model="info.vehicleTotalPrice" placeholder="请输入车辆总价"></el-input>
				</el-col>
			</el-row>
		</div>
		<div class="car-title">
			<div class="car-title-left">补贴/优惠</div>
		</div>
		<div class="add-contract">
			<el-row>
				<el-col :span="8">
					<label for="">商业折扣：</label>
					<el-input v-model="info.vehicleCommercialDiscount" placeholder="请输入商业折扣"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">地方补贴：</label>
					<el-input v-model="info.vehicleLocalSubsidies" placeholder="请输入地方补贴"></el-input>
				</el-col>
				<el-col :span="8">
					<label for="">国家补贴：</label>
					<el-input v-model="info.vehicleStateSubsidies" placeholder="请输入国家补贴"></el-input>
				</el-col>
			</el-row>
		</div>
		 <div class="car-title center-button">
            <center>
				<el-button type="primary" @click="save">保存</el-button>
				<el-button type="primary" @click="onBack">返回</el-button>
			</center>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				info:{
					orderNumber:'',
					vehicleOwnerChineseName:'',
					vehicleOwnerPhone:'',
					vehicleOwnerIdType:'',
					vehicleOwnerIdNumber:'',
					vehicleModel:'',
					vehivcleOptionalConfig:'',
					vehicleDateStart:'',
					vehicleDateEnd:'',
					dateOfAgreement:'',
					vehicleLicenseCity:'',
					vehicleVin:'',
					deliveryCenterName:'',
					deliveryCenterAddress:'',
					advancePayment:'',
					batteryRental:'',
					downPayment:'',
					finalPayment:'',
					finalPaymentBalance:'',
					loanAmount:'',
					vehicleActualTotalPrice:'',
					vehicleTotalPrice:'',
					vehicleCommercialDiscount:'',
					vehicleLocalSubsidies:'',
					vehicleStateSubsidies:''
				},
				passengerId:'',
				passengerName:'',
				dict:[],
			}
		},
		mounted() {
			this.get_dict()
		},
		methods: {
			onBack(){
				this.$emit('contractDetail')
			},
			textPopup(key){
               let list = [{name:'订单编号',property:'orderNumber'},
				   {name:'流水ID',property:'processId'},
				   {name:'流水状态',property:'processStatus'},
				   {name:'购车车主',property:'vehicleOwnerChineseName'},
				   {name:'联系电话',property:'vehicleOwnerPhone'},
				   {name:'证件类型',property:'vehicleOwnerIdType'},
				   {name:'证件号码',property:'vehicleOwnerIdNumber'},
				   {name:'车辆型号',property:'vehicleModel'},
				   {name:'选装配置',property:'vehivcleOptionalConfig'},
				   {name:'开始日期',property:'vehicleDateStart'},
				   {name:'结束日期',property:'vehicleDateEnd'},
				   {name:'签署日期',property:'dateOfAgreement'},
				   {name:'签署日期',property:'vehicleLicenseCity'},
				   {name:'车辆vin码',property:'vehicleVin'},
				   {name:'中心名称',property:'deliveryCenterName'},
				   {name:'中心地址',property:'deliveryCenterAddress'},
				   {name:'预付款',property:'advancePayment'},
				   {name:'租用金额',property:'batteryRental'},
				   {name:'定金',property:'downPayment'},
				   {name:'尾款',property:'finalPayment'},
				   {name:'尾款余额',property:'finalPaymentBalanc'},
				   {name:'贷款金额',property:'loanAmount'},
				   {name:'实际购车总价',property:'vehicleActualTotalPrice'},
				   {name:'车辆总价',property:'vehicleTotalPrice'},
				   {name:'商业折扣',property:'vehicleCommercialDiscount'},
				   {name:'地方补贴',property:'vehicleLocalSubsidies'},
				   {name:'国家补贴',property:'vehicleStateSubsidies'}]
			   for(let item of list){
                  if(item.property == key){
                        return item.name
				  }
			   }
			  
			},
			/* 添加 */
			save(){
				var self = this
				var reg = /^\d+(\.\d{1,2})?$/
				var reg1 =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
				for(let key in self.info){
					if(self.info[key] === ''){
					   self.$popup.open(self.textPopup(key)+'不为能为空')
					    return;
					}
				}
			
				if(!reg1.test(self.info.vehicleOwnerPhone)){
					 self.$popup.open('联系电话有误，请重新输入')
					 return;
				}

				this.$axios.post(this.$global.serverIp + 'crm/crmpurchasecontract/save' ,{
						"passengerId":self.passengerId,
						"crmPurchaseContract":self.info
				}).then(res =>{
					self.$popup.open('添加成功')
                   this.$emit('contractDetail',2)
				})
			},
			
			
			get_dict() {
				var self = this
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=electronicContract')
					.then(function(res) {
						if (res != '')
							self.dict = res.data.identityType;
					})
			},
			
			 querySearch(queryString, cb) {
				 var self = this
				 var temp = []
					this.$axios.post(this.$global.serverIp + 'crm/crmPassenger/myFindPageAll', {
							"limit": 5,
							"page": 1,
							"passengerName":self.passengerName,
						})
						.then(function(res) {
							if (res.data != '') {
								var restaurants = res.data
								for(let item of restaurants){
								   temp.push({'value':item.passengerName,'id':item.id})
								}
								var results = temp
								cb(results);
							}
						})
					
				},
				
				handleSelect(item) {
					this.passengerName = item.value
					this.passengerId = item.id
				}
		}
	}
</script>
<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1200px;
	}
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	.add-contract {
		width: 1200px;
		height: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.add-contract .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.add-contract .el-row .el-input{
		width:68%
	}
	.add-contract .el-select .el-input{
		width:100%
	}
	.add-contract .el-row label{
		width:100px;
		display: block;
	}
	.add-contract .el-row .el-col{
		display: flex;
		align-items: center;
	}
	.center-button{
		margin-bottom: 30px;
	}
	.my-autocomplete li {
		line-height: normal;
		padding: 7px;
	}
	.my-autocomplete li .name {
			text-overflow: ellipsis;
			overflow: hidden;
	}
	.my-autocomplete li .addr {
			font-size: 12px;
			color: #b4b4b4;
	}
	.my-autocomplete li .highlighted .addr {
			color: #ddd;
	}
	.add-contract .el-autocomplete .el-input{
      width:97%
	}

</style>
